<template>
  <div>
    <a-empty v-if="disabled" description="请先选中左侧角色/部门/用户" />
    <a-empty v-else-if="treeData.length === 0" description="无权限信息" />
    <div v-else>
      <div class="onl-auth-tree-btns">
        <a-button @click="onRefresh" size="small" type="primary" preIcon="ant-design:redo" ghost>刷新</a-button>
        <a-button @click="onSave" size="small" type="primary" preIcon="ant-design:save" ghost>保存</a-button>
      </div>
      <a-tree
        checkable
        selectable
        v-model:checkedKeys="checkedKeys"
        v-model:expandedKeys="expandedKeys"
        v-model:autoExpandParent="autoExpandParent"
        :treeData="treeData"
        @expand="onExpand"
        @select="onSelect"
      />
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, watch } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { authDataLoadTree, loadRoleAuthChecked, saveAuthData } from '../auth.api';

  export default defineComponent({
    name: 'AuthDataTree',
    props: {
      cgformId: { type: String, required: true },
    },
    setup(props) {
      const { createMessage: $message } = useMessage();
      const roleId = ref('');
      const authType = ref(3);
      const autoExpandParent = ref(true);
      const expandedKeys = ref([]);
      const checkedKeys = ref([]);
      const treeData = ref([]);
      const authMode = ref('');
      const disabled = computed(() => !roleId.value);
      watch(() => props.cgformId, loadTree, { immediate: true });
      async function loadTree() {
        if (!props.cgformId) return;
        let result = await authDataLoadTree(props.cgformId, authType.value);
        treeData.value = result.map((item) => ({ key: item.id, title: item.ruleName }));
      }
      async function loadChecked($roleId, $authMode) {
        roleId.value = $roleId;
        authMode.value = $authMode;
        checkedKeys.value = [];
        let result = await loadRoleAuthChecked({
          roleId: $roleId,
          cgformId: props.cgformId,
          type: authType.value,
          authMode: $authMode,
        });
        checkedKeys.value = result.map((item) => item.authId);
      }
      function clearChecked() {
        roleId.value = '';
      }
      function onRefresh() {
        loadTree();
        loadChecked(roleId.value, authMode.value);
      }
      async function onSave() {
        await saveAuthData(roleId.value, props.cgformId, {
          authId: checkedKeys.value,
          authMode: authMode.value,
        });
        $message.success('保存成功');
      }
      function onExpand($expandedKeys) {
        expandedKeys.value = $expandedKeys;
        autoExpandParent.value = false;
      }
      function onSelect(selectedKeys, info) {
        console.log('wwww-onSelect', selectedKeys, info);
      }
      function clear() {
        roleId.value = '';
        checkedKeys.value = [];
      }
      return {
        loadChecked,
        clear,
        expandedKeys,
        autoExpandParent,
        checkedKeys,
        treeData,
        disabled,
        onSave,
        onExpand,
        onSelect,
        onRefresh,
        clearChecked,
      };
    },
  });
</script>
<style scoped>
  .onl-auth-tree-btns {
    margin-left: 10px;
  }

  .onl-auth-tree-btns button {
    margin: 0 5px 0 2px;
  }
</style>
